<template>
    <div id="app">
        <div class="header-view">
            <component :is="head.is" :left="head.left" :content="head.content" :right="head.right" :nav="head.nav" @onclick="handleNavEvent"/>
        </div>
        <div class="router-view" :class="{'showNav': !hideNav}">
            <router-view ref="ref-router-view"/>
        </div>
        <div class="nav-view" v-if="!hideNav">
            <router-link to="/" class="nav-item" :class="{active: nav == 'home' || nav == '/'}">
                <img v-if="nav == 'home' || nav == '/'" src="../assets/bottom-1-sy-on.svg">
                <img v-else="" src="../assets/bottom-1-sy.svg">
                <div class="nav-text">首页</div>
            </router-link>
            <router-link to="/same" class="nav-item" :class="{active: nav == 'same'}">
                <img v-if="nav == 'same'" src="../assets/bottom-2-ty-on.svg">
                <img v-else="" src="../assets/bottom-2-ty.svg">
                <div class="nav-text">同业</div>
            </router-link>
            <router-link to="/think" class="nav-item" :class="{active: nav == 'think'}">
                <img v-if="nav == 'think'" src="../assets/bottom-3-zk-on.svg">
                <img v-else="" src="../assets/bottom-3-zk.svg">
                <div class="nav-text">智库</div>
            </router-link>
            <router-link to="/study" class="nav-item" :class="{active: nav == 'study'}">
                <img v-if="nav == 'study'" src="../assets/bottom-4-xx-on.png">
                <img v-else="" src="../assets/bottom-4-xx.svg">
                <div class="nav-text">学习</div>
            </router-link>
            <router-link to="/workplace" class="nav-item" :class="{active: nav == 'workplace'}">
                <img v-if="nav == 'workplace'" src="../assets/bottom-5-wd-on.png">
                <img v-else="" src="../assets/bottom-5-wd.svg">
                <div class="nav-text">职场</div>
            </router-link>
        </div>
        <bottom-popup-share v-model="showShare"/>
    </div>
</template>

<style lang="less">

    @import '../style/app';

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: @color-text-black;
        font-size: 1.4rem;

        .header-view{
            height: 4.4rem;
            position: fixed;
            width: 100%;
            z-index: 200;
        }

        .router-view{
            padding-top: 4.4rem;
            &.showNav{
                padding-bottom: 5rem;
            }

        }

        .nav-view{
            height: 5rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            border-top: 1px solid @color-line-gray;
            text-align: center;
            background-color: @color-white;
            z-index: 200;
            .nav-item{
                width: 20%;
                float: left;
                padding: 1rem 0 .3rem;
                color: @color-text-gray;
                img{
                    height:2rem;
                    display: block;
                    margin: auto;
                }
                .nav-text{
                    font-size: 1rem;
                    line-height:1.8rem;
                }
                &.active{
                    color: @app-color;
                }
            }
        }
    }
</style>

<script>
    import Default from '../components/header/Default.vue'

    export default {
        data(){
            return {
                nav: '/',
                showShare: false
            }
        },
        created(){
            this.setNav(window.location.hash);

//            this.$dialog.alert({
//                title: '标题',
//                message: '弹窗内容'
//            }).then(() => {
//                // on close
//            });

//            this.$dialog.confirm({
//                title: '标题',
//                message: '弹窗内容'
//            }).then(() => {
//                // on confirm
//            }).catch(() => {
//                // on cancel
//            });




//            this.$toast.fail('成功文案');
//            this.$toast.allowMultiple();
            this.$toast.setDefaultOptions({duration: 0});
//            this.$toast.loading('成功文案');


        },
        methods: {
            setNav(path){
                const routeArray = ['home', 'same', 'think', 'study', 'workplace'];
                let nav = '';
                routeArray.map(o=>{
                    const regExp = new RegExp(`^#?/${o}/\?`);
                    if(path.match(regExp)){
                        nav = o;
                        this.nav = o;
                        return false;
                    }else{
                        this.nav = '';
                    }
                });
                this.nav = nav;
            },
            setAppHeader(name = ''){
                let obj = null;
                if(name){
                    try{
                        obj = JSON.parse(name);
                    }catch (e){
                        console.error(e);
                    }
                }
                this.$store.commit('setHeader', obj);
            },

            handleNavEvent(key){
                if(key == 'share'){
                    this.showShare = true;
                }
                const ref = this.$refs['ref-router-view'];
                ref && ref.onNavEvent && ref.onNavEvent(key);
            }
        },
        computed: {
            head(){
                return {
                    is: 'header-default',
                    ...this.$store.state.app.headerView
                }
            },
            hideNav(){
                return this.$store.state.app.hideNav;
            }
        },
        components: {
            'header-default': Default
        },
        beforeRouteEnter(to, from, next) {
            next(vm=>{
                vm.setAppHeader.call(vm, to.name);
            });
        },
        beforeRouteUpdate(to, from, next) {
            this.setAppHeader(to.name);
            this.setNav(to.path);
            this.$store.commit('hideNav');
            next();
        }
    }
</script>
